Ext.define('Jason.view.main.Setting', {
    extend: 'Ext.container.Container',
    xtype: 'settingView',
    requires:['Ext.Img'],
    defaults: { margin: '8 6' },
    items: [{
        xtype: 'container',
        minHeight: 100,
        items: [{
            xtype: 'label',
            html: '<span style=" display: inline-block;width: 97px;border-top: 1px solid #ccc;"></span><span style="color: #686868;vertical-align: -8%;"> 导航栏模式 </span><span style=" display: inline-block;width: 97px;border-top: 1px solid #ccc;"></span>'
        },{
            xtype: 'container',
            margin:'8 0 0 0',
            defaults:{
                width : 95,height : 68
            },
            layout : {
                type : 'hbox'
            },
            items:[{
                xtype : 'container',
                style:{
                    position: 'relative',
                    width: '44px',
                    height: '36px',
                    marginRight: '16px',
                    overflow: 'hidden',
                    backgroundColor: '#f0f2f5',
                    borderRadius: '4px',
                    boxShadow: '0 1px 2.5px 0 rgb(0 0 0 / 18%)',
                    cursor: 'pointer'
                },
                margin:'0 8 0 0',
                cls:'setting-drawer-block-checkbox-item',
                title:'左侧菜单模式',
                listeners: {
                    el: {
                        click: function(){
                            localStorage.setItem("isTreeMenu",true);
                            localStorage.setItem("isToolbarMenu",false);
                            Ext.Viewport.getViewModel().set('isTreeMenu',true);
                            Ext.Viewport.getViewModel().set('isToolbarMenu',false);
                        }
                    }
                }
            },{
                xtype : 'container',
                style:{
                    position: 'relative',
                    width: '44px',
                    height: '36px',
                    marginRight: '16px',
                    overflow: 'hidden',
                    backgroundColor: '#f0f2f5',
                    borderRadius: '4px',
                    boxShadow: '0 1px 2.5px 0 rgb(0 0 0 / 18%)',
                    cursor: 'pointer'
                },
                cls:'setting-drawer-block-checkbox-item-top',
                title:'顶部菜单模式',
                listeners: {
                    el: {
                        click: function(){
                            localStorage.setItem("isTreeMenu",false);
                            localStorage.setItem("isToolbarMenu",true);
                            Ext.Viewport.getViewModel().set('isTreeMenu',false);
                            Ext.Viewport.getViewModel().set('isToolbarMenu',true);
                        }
                    }
                }
            }]
        }]
    }, {
        xtype: 'container',
        items: [{
            xtype: 'label',
            html: '<span style=" display: inline-block;width: 104px;border-top: 1px solid #ccc;"></span><span style="color: #686868;vertical-align: -8%;"> 顶栏主题 </span><span style=" display: inline-block;width: 104px;border-top: 1px solid #ccc;"></span>'
        },{
            xtype: 'container',
            defaults:{
                xtype : 'panel',width : 15,height : 15
            },
            layout : {
                type : 'table',
                columns : 9,
                tdAttrs: {
                    valign: 'middle'
                }
            },
            listeners:{
                afterrender:function(container){
                    var me = this;
                    Ext.Array.each(container.items.items,function(obj){
                        Ext.get(obj.id).on('click', function() {
                            Ext.Viewport.getViewModel().set('topToolbarBkc',obj.color);
                            localStorage.setItem("topToolbarBkc",obj.color);
                        });
                    });
                }
            },
            items:[
                {color : '#3479fd',bodyStyle : 'background:#3479fd;cursor: pointer;'},
                {color : '#151515',bodyStyle : 'background:#151515;cursor: pointer;'},
                {color : '#009688',bodyStyle : 'background:#009688;cursor: pointer;'},
                {color : '#5172dc',bodyStyle : 'background:#5172dc;cursor: pointer;'},
                {color : '#409eff',bodyStyle : 'background:#409eff;cursor: pointer;'},
                {color : '#e74c3c',bodyStyle : 'background:#e74c3c;cursor: pointer;'},
                {color : '#394664',bodyStyle : 'background:#394664;cursor: pointer;'},
                {color : '#001529',bodyStyle : 'background:#001529;cursor: pointer;'},
                {color : '#383f45',bodyStyle : 'background:#383f45;cursor: pointer;'},
            ]
        }]
    }, {
        xtype: 'container',
        items: [{
            xtype: 'label',
            html: '<span style=" display: inline-block;width: 104px;border-top: 1px solid #ccc;"></span><span style="color: #686868;vertical-align: -8%;"> 界面显示 </span><span style=" display: inline-block;width: 104px;border-top: 1px solid #ccc;"></span>'
        },{
            xtype:'radiogroup',labelSeparator:'',labelWidth:185,
            fieldLabel:'标签页',
            listeners:{
                change:function( radioGroup, newValue, oldValue, eOpts ) {
                    localStorage.setItem("pageStyle",newValue.isTab);
                    Ext.Viewport.getController()._onInitPageStyle();
                }
            },
            items:[
                { boxLabel: '是', name: 'isTab', inputValue: 'advanced',checked:true},
                { boxLabel: '否', name: 'isTab', inputValue: 'default' }
            ]
        },{
            xtype:'radiogroup',labelSeparator:'',labelWidth:185,
            fieldLabel:'LOGO',
            listeners:{
                change:function( radioGroup, newValue, oldValue, eOpts ) {
                    localStorage.setItem("isShowLogo",((newValue.isLogo)=='1'?true:false));
                    Ext.Viewport.getViewModel().set('showLogo',localStorage.getItem('isShowLogo')==='true'?true:false);
                }
            },
            items:[
                { boxLabel: '是', name: 'isLogo', inputValue: '1'},
                { boxLabel: '否', name: 'isLogo', inputValue: '0',checked:true}
            ]
        }]
    }]
})